<script setup lang="ts">
import { useHospitalStore } from '@/stores'

const hospitalStore = useHospitalStore()
</script>

<template>
  <div class="register" v-if="hospitalStore.hospitalInfo?.hospital.logoData">
    <el-row class="top">
      <div class="title">{{ hospitalStore.hospitalInfo.hospital.hosname }}</div>
      <svg
        t="1725106903320"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4245"
        width="16"
        height="16"
      >
        <path
          d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
          fill="#707070"
          p-id="4246"
        ></path>
      </svg>
      <i>{{ hospitalStore.hospitalInfo.hospital.param.hostypeString }}</i>
    </el-row>
    <el-row class="bottom">
      <el-col :span="3" class="img">
        <el-image
          :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital.logoData}`"
          fit="cover"
        ></el-image>
      </el-col>
      <el-col :span="21" class="text">
        <p>
          具体地址：{{ hospitalStore.hospitalInfo.hospital.param.fullAddress }}
        </p>
        <p>具体路线：{{ hospitalStore.hospitalInfo.hospital.route }}</p>
      </el-col>
    </el-row>
    <el-row class="content">
      <el-col :span="24">
        <h3>医院介绍</h3>
        <el-text tag="p" type="info" size="large">
          {{ hospitalStore.hospitalInfo.hospital.intro }}
        </el-text>
      </el-col>
    </el-row>
  </div>
  <el-empty v-else description="暂无数据"> </el-empty>
</template>

<style lang="scss" scoped>
.register {
  .top {
    margin: 30px 0px;
    .title {
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .bottom {
    .img {
      width: 100%;
      height: 100%;
      align-items: center;
      display: flex;
      justify-content: center;
      .el-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .text {
      color: #707070;
      font-size: 14px;
      h3 {
        font-weight: 700;
      }
      p {
        margin: 10px 0;
      }
    }
  }
  .content {
    h3 {
      font-weight: 700;
      font-size: 30px;
      margin: 20px 0;
    }
    .el-text {
      line-height: 2;
    }
  }
}
</style>
